<template>
	<view>
		<image style="width:100%;height: 240px;" src='@/static/userBackImg.jpg'></image>
		<view style="margin-top: -120px;margin-left:20px" @click="login()" openType="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<view style="display: flex;width:100%;line-height: 50px;height: 60px">
				<u-avatar :src="form.url"></u-avatar>
				<p v-if="form.name != ''" style="margin-left: 15px;">{{ form.name }}</p>
				<p v-if="form.name != ''" style="margin-left: 15px;">{{ form.class }}</p>
				<span v-if="form.name == ''" style="margin-left: 15px;">未登录</span>
			</view>
		</view>
		<view style="background: #FFFFFF;border-radius: 10px;padding:0px 20px;margin:70px 20px 0px 20px;">
			<u-cell-group>
				<u-cell-item icon="file-text" arrow="true" v-show="form.name != ''" title="修改信息" @click="register('edit')"></u-cell-item>
				<u-cell-item icon="checkbox-mark" arrow="true" title="已借图书" @click="bookLended()"></u-cell-item>
				<u-cell-item icon="file-text" arrow="true" title="借书记录" @click="toBookRecord()"></u-cell-item>
				<u-cell-item icon="backspace" arrow="true" v-show="form.name != ''" title="退出登录" @click="exitShow = true"></u-cell-item>
			</u-cell-group>
		</view>
		<view>
			<u-popup v-model="openShow" mode="center"  border-radius="14" width="260px" height="auto">
				<view style="padding:20px" v-show="title == 'login'">
					<u-form :model="form" ref="uForm">
						<u-form-item label="账号"><u-input v-model="accountData.accountNum" /></u-form-item>
						<u-form-item label="密码"><u-input v-model="accountData.passWord" type="password"/></u-form-item>
					</u-form>
					<view style="display: flex;padding-left: 25px;margin-top:20px;">
						<u-button type="primary"  style="margin:0px 10px" @click="sendMessage()">登录</u-button>
						<u-button type="primary" :plain="true" style="margin:0px 10px" @click="register('register')">注册</u-button>
					</view>
				</view>
				
				<view style="padding:15px" v-show="title == 'lendBook'">
					<view style="display: flex;flex-wrap: wrap;">
						<view v-for="(item,index) in lendBookList" :key="index" @click="toBook(item.id)" style="display: flex;margin:10px;">
							<image :src=item.bookImage style="width:150rpx;height: 180rpx;margin-right: 10px;"></image>
							<view class='bookBox'>
								<span>《{{ item.bookName }}》</span>
								<span>{{ item.bookAuthor }}</span>
								<span>借书时间:{{ item.beginTime }}</span>
								<span>借书期限:{{ item.leaseTime }}天</span>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<u-toast ref="uToast" />
		</view>
		<u-modal v-model="exitShow" content="确认退出账号?" @confirm="confirm" @cancel="exitShow = false" show-cancel-button="true" mask-close-able="true"></u-modal>
	</view>
</template>

<script>
	import { userLogin } from '@/utils/user.js';
	import { getBookById,getBookImg } from '@/utils/book.js'
		import BASE_URL from '@/utils/env.js'
	export default{
		data(){
			return{
				//弹出框
				openShow:false,
				//退出弹出框
				exitShow:false,
				//弹出框类型
				title:'',
				accountData:{
					accountNum:'',
					passWord:''
				},
				//用户数据
				form:{
					id:'',
					name:'',
					class:'',
					url:'',
					sex:'',
					accountNum:'',
					lendBookNum:''
				},
				//借书列表
				lendBookList:[]
			}
		},
		created(){
		},
		methods:{
			//登录
			login(){
				if(this.form.name != ''){
					
				}else{
					this.openShow = true
					this.title = 'login'
				}
			},
			//跳转注册页面
			register(data){
				if(data == 'register'){
					this.openShow = false
					uni.navigateTo({
						url: `/pages/register/index?keyWord=${data}`
					})
				}else if(data == 'edit'){
					uni.navigateTo({
						url: `/pages/register/index?keyWord=${wx.getStorageSync('userMessage').id}`
					})
				}
			},
			sendMessage(){
				const param = {
					...this.accountData
				}
				userLogin(param).then((res)=>{
					if(res.code == 200){
						this.$refs.uToast.show({
							title: '登录成功',
							type: 'success',
						});
						this.form = {
							id:res.data.id,
							name:res.data.name,
							url:res.data.url,
							class:res.data.class,
							sex:res.data.sex,
							accountNum:res.data.accountNum,
							lendBookNum:res.data.lendBookNum
						}
						wx.setStorageSync('userMessage',this.form);
						this.openShow = false
					}else if(res.code == 500){
						this.$refs.uToast.show({
							title: '登录失败',
							type: 'error',
						});
					}else if(res.code == 201){
						this.$refs.uToast.show({
							title: '未查询到账号',
							type: 'error',
						});
					}
				})
			},
			confirm(){
				this.form={
					id:'',
					url:'',
					name:'',
					class:'',
					sex:'',
					accountNum:'',
					lendBookNum:''
				},
				wx.clearStorageSync()
				this.exitShow = false
			},
			//查看已借书籍
			bookLended(){
				if(this.form.name == ''){
					this.$refs.uToast.show({
						title: '请先登录账号!',
						type: 'error',
					});
				}else{
					let params = {
						leaseId:this.form.id
					}
					getBookById(params).then((res)=>{
						if(res.code == 200){
							this.lendBookList = res.data
							
							this.lendBookList.forEach(async item =>{
								item.beginTime = item.beginTime.split('T')[0]
								const imgdata = await this.getBookImgList(item.bookImage[0])
								item.bookImage = BASE_URL+imgdata.data[0].bookurl
								console.log(item.bookImage)
							})
							
							// let imgIdList = this.lendBookList[0].bookImage.toString().split(',')
							// const getImg = async _ =>{
							// 		imgIdList.forEach( async item =>{
							// 		this.abcUrl = await this.getBookImgList(item)
							// 		this.imgList = []
							// 		this.imgList.push(BASE_URL+this.abcUrl.data[0].bookurl)
							// 	})
							// }
							// getImg()
							if(this.lendBookList != ''){
								this.openShow = true
								this.title = 'lendBook'
							}else if(this.lendBookList == ''){
								this.$refs.uToast.show({
									title: '未查询到借书信息!',
									type: 'error',
								});
							}
						}
					})

				}
			},
			//点击到达书籍页面
			toBook(data){
				const id = data
				uni.navigateTo( {url:`/pages/bookMessage/index?key=${id}`})
			}
			,
			//获取封面图片
			getBookImgList(data){
				let params = {
					id:data
				}
				//细写就会获取不到数据，应该也是异步原因
				return getBookImg(params)
			},
			toBookRecord(){
				if( this.form.name == ''){
					this.$refs.uToast.show({
						title: '请先登录账号!',
						type: 'error',
					});
				}else{
					const id = this.form.id
					uni.navigateTo( {url:`/pages/bookRecord/index?key=${id}`})
				}
			}
		}
	}
</script>

<style>
page{
	background-color:#F2F2F2;
}
.bookBox{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding:10px 0px;
	font-size: 12px;
}
</style>